<!-- 课程班级 -->
<template>
	<view>
		<cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">今日维保计划完成情况</block>
		</cu-custom>
		<view class="content">
			<view class="order">
				<view class="top">
					<view class="left">
						<uni-text class="text-blue"></uni-text>
						<view style="font-weight: 700;" class="store">计划名：{{JobName}}</view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in dataList">
				<view class="order">
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">{{ item.Time }}</view>
						</view>
						<view class="right">
							<view class="progressBox">
								<view class="evaluate btn">
									<text class="content-left">{{ item.Completed }}</text>
									<text class="content-middle">/</text>
									<text class="content-right">{{ item.ALLComplete }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="left">
						</view>
						<view class="content">
							<view class="title u-line-2 text-bold">维保类型：{{ item.JobTask }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request1 from '@/common/request.js';
import unifab from "../../../components/beyondGod-drag/beyoundGod-drag.vue";	
export default {
	components: {
			unifab
		},
	data() {
		return {
			
			windowHeight: 0,
			mapHeight: 0,
			getData:{
				jobId:0
			},
			JobName:'',
			dataList: []
		};
	},
	onReady(){
		// 获取屏幕高度
		uni.getSystemInfo({
			success: res => {
				this.windowHeight = res.windowHeight;
			}
		});
	},
	mounted() {
		this.setNavTop('.navBox')
	},
	onLoad(){
		this.queryList();
	},
	computed: {
	},
	methods: {
		setNavTop(style) {
			let view = uni.createSelectorQuery().select(style);
			view
				.boundingClientRect(data => {
					this.mapHeight = this.windowHeight - data.height;
					console.log(this.mapHeight)
				})
				.exec();
		},
		queryList() {
			uni.showLoading({
				title: '加载中'
			})
			var that = this;
			uni.getStorage({
				key: 'JobId',
				success: function (res1) {
					let opts = {
						url: 'api/GetTodayJobDetail',
						method: 'get'
					};
					console.log(1)
					that.getData.jobId=res1.data.id;
					request1.httpTokenRequest(opts,that.getData).then(res => {
						uni.hideLoading();
						console.log(2)
						if(res.data.code == 1){
							console.log(3)
							that.dataList=res.data.data.dataList;
							that.JobName=res.data.data.JobName;
						}
						else{
						console.log(4)
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					});
				},fail() {
					
					console.log(5)
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.content-left{
	font-weight: 700;
	color: red;
	padding-right: 10rpx;
}
.content-middle{
	font-weight: 700;
}
.content-right{
	font-weight: 700;
	padding-left: 10rpx;
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 34rpx;
				//font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
			.progressBox{
				width: 150rpx;
				float: right;
				.btn {
					line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}
				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 260rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 45rpx;
			}
			.type {
				margin: 6rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.delivery-time {
				color: #0081ff;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 12rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>

